<template>
	<view class="join-container">
		<!-- 头部渐变区域 -->
		<view class="header-section">
			<view class="header-content">
				<image :src="$IMG_URL('/static/newVersion/logo1.png')" mode="aspectFit" class="header-icon"></image>
				<view class="header-text">
					<view class="title">加盟合作</view>
					<view class="subtitle">携手共创美好未来</view>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<scroll-view 
			scroll-y="true" 
			class="content-scroll"
			@scroll="handleScroll"
			:scroll-top="scrollTop"
			enhanced="true"
			:bounces="true"
			@scrolltoupper="onPullDown">
			
			<!-- 下拉刷新区域 -->
			<view class="pull-down-area" :class="{ active: isPulling }">
				<view class="pull-down-content">
					<view class="pull-icon" :class="{ rotate: isPulling }">
						<u-icon name="arrow-down" color="#73F0EA" size="20"></u-icon>
					</view>
					<text class="pull-text">{{ pullText }}</text>
				</view>
			</view>

			<!-- 主要内容区域 -->
			<view class="main-content" :class="{ animate: contentLoaded }">
				<!-- 如果有内容则解析显示 -->
				<view v-if="content" class="content-wrapper">
					<u-parse :html="processedContent"></u-parse>
				</view>
				
				<!-- 加载状态 -->
				<view v-else class="loading-wrapper">
					<view class="loading-card" v-for="n in 3" :key="n" :style="{ animationDelay: (n-1) * 0.2 + 's' }">
						<view class="skeleton-avatar"></view>
						<view class="skeleton-content">
							<view class="skeleton-line long"></view>
							<view class="skeleton-line"></view>
							<view class="skeleton-line short"></view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部留白，避免被按钮遮挡 -->
			<view class="bottom-spacer"></view>
		</scroll-view>
		<!-- 底部固定按钮 -->
		<view class="footer-section" :class="{ show: contentLoaded }">
			<view class="action-button" @click="become">
				<view class="button-content">
					<u-icon name="plus" color="#FFFFFF" size="18"></u-icon>
					<text class="button-text">申请加盟</text>
				</view>
				<view class="button-glow"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import{
		joinmain
	} from '@/api/apply.js'
	export default {
		data() {
			return {
				content: '',
				contentLoaded: false,
				scrollTop: 0,
				isPulling: false,
				pullText: '下拉刷新',
				refreshing: false,
			}
		},
		computed: {
			// 处理HTML内容，优化显示效果
			processedContent() {
				if (!this.content) return '';
				
				// 可以在这里对HTML内容进行一些处理，比如统一样式
				let processed = this.content;
				
				// 为图片添加统一样式
				processed = processed.replace(/<img/g, '<img style="width: 100%; border-radius: 12rpx; margin: 20rpx 0; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);"');
				
				// 为段落添加样式
				processed = processed.replace(/<p/g, '<p style="line-height: 1.8; margin: 16rpx 0; color: #333; font-size: 28rpx;"');
				
				return processed;
			}
		},
		onLoad() {
			this.getjoinmain()
		},
		methods: {
			// 获取加盟内容
			getjoinmain(){
				// 显示加载状态
				this.contentLoaded = false;
				
				joinmain().then(({data:res})=>{
					console.log('res', res);
					if(res.code == 1){
						this.content = res.data.content;
						
						// 模拟加载时间，让动画更自然
						setTimeout(() => {
							this.contentLoaded = true;
						}, 500);
					}
				}).catch(error => {
					console.error('获取加盟内容失败:', error);
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
					this.contentLoaded = true;
				});
			},
			
			// 处理滚动事件
			handleScroll(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			
			// 下拉刷新
			onPullDown() {
				if (this.refreshing) return;
				
				this.isPulling = true;
				this.pullText = '释放刷新';
				this.refreshing = true;
				
				// 模拟刷新动作
				setTimeout(() => {
					this.getjoinmain();
					this.pullText = '刷新成功';
					
					setTimeout(() => {
						this.isPulling = false;
						this.pullText = '下拉刷新';
						this.refreshing = false;
					}, 800);
				}, 1000);
			},
			
			// 申请加盟
			become() {
				this.$ROUTELINK('apply')
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #73F0EA, rgba(255, 255, 255, 0.00));
		min-height: 100vh;
	}

	.join-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		position: relative;

		// 头部区域
		.header-section {
			background: linear-gradient(135deg, #73F0EA 0%, #5ee8e1 100%);
			padding: 100rpx 40rpx 100rpx;
			border-radius: 0 0 40rpx 40rpx;
			box-shadow: 0 8rpx 25rpx rgba(115, 240, 234, 0.3);
			position: relative;
			overflow: hidden;
			z-index: 999;
			min-height: 280rpx;

			&::before {
				content: '';
				position: absolute;
				top: -50%;
				right: -20%;
				width: 200rpx;
				height: 200rpx;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 50%;
				animation: float 6s ease-in-out infinite;
			}

			.header-content {
				display: flex;
				align-items: center;
				color: white;
				z-index: 1000;
				position: relative;

				.header-icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
					margin-right: 24rpx;
					backdrop-filter: blur(10rpx);
					border: 2rpx solid rgba(255, 255, 255, 0.3);
					box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
				}

				.header-text {
					flex: 1;

					.title {
						font-size: 36rpx;
						font-weight: bold;
						margin-bottom: 8rpx;
						text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
					}

					.subtitle {
						font-size: 26rpx;
						opacity: 0.9;
						text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.15);
					}
				}
			}
		}

		// 内容区域
		.content-scroll {
			flex: 1;
			width: 100%;
			padding: 40rpx 40rpx 0;
			position: relative;
			z-index: 1;

			// 下拉刷新区域
			.pull-down-area {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				transform: translateY(-100rpx);
				opacity: 0;

				&.active {
					transform: translateY(0);
					opacity: 1;
				}

				.pull-down-content {
					display: flex;
					align-items: center;
					color: #73F0EA;

					.pull-icon {
						margin-right: 16rpx;
						transition: transform 0.3s ease;

						&.rotate {
							transform: rotate(180deg);
						}
					}

					.pull-text {
						font-size: 26rpx;
						color: #73F0EA;
					}
				}
			}

			// 主要内容
			.main-content {
				background: white;
				border-radius: 24rpx;
				box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
				overflow: hidden;
				transform: translateY(40rpx);
				opacity: 0;
				transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
				margin-top: 0rpx;
				position: relative;
				z-index: 1;

				&.animate {
					transform: translateY(0);
					opacity: 1;
				}

				.content-wrapper {
					padding: 40rpx;
					line-height: 1.8;

					// 优化HTML内容样式
					::v-deep {
						img {
							width: 100% !important;
							height: auto !important;
							border-radius: 12rpx !important;
							margin: 20rpx 0 !important;
							box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1) !important;
							transition: transform 0.3s ease !important;

							&:hover {
								transform: scale(1.02) !important;
							}
						}

						p {
							line-height: 1.8 !important;
							margin: 16rpx 0 !important;
							color: #333 !important;
							font-size: 28rpx !important;
							text-align: justify !important;
						}

						h1, h2, h3, h4, h5, h6 {
							color: #73F0EA !important;
							margin: 30rpx 0 20rpx !important;
							font-weight: 600 !important;
						}

						strong {
							color: #73F0EA !important;
							font-weight: 600 !important;
						}
					}
				}

				// 加载状态
				.loading-wrapper {
					padding: 40rpx;

					.loading-card {
						display: flex;
						align-items: flex-start;
						margin-bottom: 40rpx;
						animation: fadeInUp 0.6s ease forwards;
						opacity: 0;

						.skeleton-avatar {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
							background-size: 200% 100%;
							animation: shimmer 1.5s infinite;
							margin-right: 24rpx;
						}

						.skeleton-content {
							flex: 1;

							.skeleton-line {
								height: 24rpx;
								background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
								background-size: 200% 100%;
								animation: shimmer 1.5s infinite;
								border-radius: 12rpx;
								margin-bottom: 16rpx;
								width: 100%;

								&.short {
									width: 60%;
								}

								&.long {
									width: 90%;
								}
							}
						}
					}
				}
			}

			// 底部留白
			.bottom-spacer {
				height: 200rpx;
			}
		}

		// 底部按钮区域
		.footer-section {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx 40rpx 40rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 1) 100%);
			backdrop-filter: blur(20rpx);
			transform: translateY(100%);
			transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

			&.show {
				transform: translateY(0);
			}

			.action-button {
				width: 100%;
				height: 88rpx;
				background: linear-gradient(135deg, #73F0EA 0%, #5ee8e1 100%);
				border-radius: 50rpx;
				position: relative;
				overflow: hidden;
				box-shadow: 
					0 8rpx 25rpx rgba(115, 240, 234, 0.3),
					0 2rpx 8rpx rgba(115, 240, 234, 0.2);
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.98);
					box-shadow: 
						0 4rpx 15rpx rgba(115, 240, 234, 0.4),
						0 1rpx 4rpx rgba(115, 240, 234, 0.3);
				}

				.button-content {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
				position: relative;
				z-index: 2;

					.button-text {
						font-size: 32rpx;
						font-weight: 600;
						color: #FFFFFF;
						margin-left: 12rpx;
						letter-spacing: 2rpx;
					}
				}

				.button-glow {
					position: absolute;
					top: 0;
					left: -100%;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
					animation: shine 2s infinite;
				}
			}
		}
	}

	// 动画效果
	@keyframes float {
		0%, 100% {
			transform: translateY(0) rotate(0deg);
		}
		50% {
			transform: translateY(-20rpx) rotate(5deg);
		}
	}

	@keyframes shimmer {
		0% {
			background-position: -200% 0;
		}
		100% {
			background-position: 200% 0;
		}
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(40rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes shine {
		0% {
			left: -100%;
		}
		100% {
			left: 100%;
		}
	}
</style>